// 这里对vue进行简单的介绍

// 1.创建Vue根实例
var vm = new Vue({

})

// 2. 给vue添加扩展组件，这种方法通常会被组件系统的方式实现

var myComponent = Vue.extend({
    // 扩展选项
})

// vue实例都会代理其data对象，相当于其自身的属性，可以通过实例名.xxx访问属性

var data = { a:1}

var vm2 = new Vue({
    data : data
})

vm2.a = data.a  // 输出为true

//这里完成绑定以后，更改data里面的值，也就意味着更改了vm对象的属性。

// ** 注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。我们将在后面详细讨论响应系统

//为了方便操作，Vue还有些特殊的实例属性和方法，以$符号作为前缀进行区分

var dat2 = { a:1}

var vm3 = new Vue({
    el:"#example",
    data : data2
})

vm3.$data === data2 // -> true
// vm3.data === data2 ???

// dom对象获取
vm3.$el === document.getElementById("example")

// 属性值变更监听
vm3.$watch('a',function(newVal,oldVal){
    // 回调函数在'vm3.a' 改变的时候调用
})
// 注意，不要在实例属性或者回调函数中（如 vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义

// 实例对象的生命周期
/**
 * 
 * new Vue()
 * --> Event:beforeCreate
 * Observe Data
 * Init Events
 * --> Event:created
 * 判断有没有el这个选项-->没有，调用vm.$mount(el)
 * 有el,判断有没有templdate这个选项-->没有，编译el对应的html dom节点作为一个template
 * 有template选项，编译模板，执行render方法
 * --> Event:beforeMount
 * 创建vm.$el和替代本身的el属性
 * --> Event:mounted
 * 
 * 当data值发生变化
 * --> Event:beforeUpdate
 * MVVM : 更新模型
 * --> Event:updated
 * 
 * 当执行vm.$destroy() 方法被调用
 * 
 * --> Event:deforeDestry
 * 
 * 关闭watchers,子组件和event listeners
 * 
 * Destroyed 
 * --> Event:destroyed
 * 
 * @see https://cn.vuejs.org/images/lifecycle.png
*/




